<meta charset="UTF-8">
<style type="text/css">
   #passwordModal .selected_on{
	  background: -webkit-linear-gradient(#FAFAFA, #CECECE); /* Safari 5.1 - 6.0 */
	  background: -o-linear-gradient(#FAFAFA, #CECECE); /* Opera 11.1 - 12.0 */
	  background: -moz-linear-gradient(#FAFAFA, #CECECE); /* Firefox 3.6 - 15 */
	  background: linear-gradient(#FAFAFA, #CECECE); /* 标准的语法 */
   }
   
	.veri_step_pic{
		background:url('__PUBLIC__/Image/Index/verification_tit.png') no-repeat;
		height:40px;
		margin-left:50px;
		margin-top:30px;
		margin-bottom:30px;
	}

</style>
<script type="text/javascript">
var checkPhoneFlag = false;
$(function(){
	$("#loginModal #loginBtn").click(function(){
		login();
	});
	
	/* $("#loginModal #loginBtn").keydown(function(event){
		if(event.witch == 13){
			login();
		}
	}) */
	
	// 显示登录页面时刷新验证码
	$('#loginModal').on('show.bs.modal', function (e) {
		$("#loginModal #username").val("");
		$("#loginModal #password").val("");
		$("#loginModal #verify").val("");
		refreshLoginVerify('__URL__/verify');
		if($("#loginModal #checkin").is(":checked")){
			$("#loginModal #checkin").click();
		}
	});
	
	// 显示忘记密码弹出框时初始化
	$('#passwordModal').on('show.bs.modal', function (e) {
		$("#passwordModal #username").val("");
		$("#passwordModal #verify").val("");
		$("#passwordModal #sms_verify_code").val("");
		
		$("#passwordModal #password").val("");
		$("#passwordModal #password-confirm").val("");
		$("#passwordModal #msg-phone").text("");
		
		$("#passwordModal .first_step").show();
		$("#passwordModal .second_step").hide();
		$("#passwordModal .third_step").hide();
	});
	
	// 设置登录checkbox框
	$("#loginModal #checkin").val(0);
	
	$("#loginModal #checkin").click(function(){
		if($("#loginModal #checkin").is(":checked")){
			$("#loginModal #checkin").val(1);
		} else {
			$("#loginModal #checkin").val(0);
		}
	})
	
	 //回车键按下时登录
	/*  $('#loginModal').keydown(function(event){
		 if(event.keyCode == 13){
				login();
			}
	 }); */
	 
	// 发送验证码
	$("#passwordModal #sendSmsVerify").click(function(){
		// 账户信息(手机号)
		var phone = $("#passwordModal #username").val();
		// 手机号的合法性检查
		if (!phone.match(/1[3-9]\d{9}$/)){
			$("#passwordModal #msg-phone").text("请输入正确的手机号！");
			return false;
		}
		if(!checkPhoneFlag){
			if($.trim($("#passwordModal #msg-phone").text()) == ""){
				$("#passwordModal #msg-phone").text("请输入正确的手机号！");
			}
			return false;
		}
		$("#passwordModal #sendSmsVerify").attr("disabled", true);
		var timeInt = 59;
		$("#passwordModal #sendSmsVerify").css("background-color", "gray");
		var timer = window.setInterval(function(){
			if(timeInt == 59){
				$.ajax({
					   url:"__URL__/sendSmsVerify",
					   type:"POST",
						async: false,
					    data: "phone=" + phone,
					    dataType: "json",
					    success:function(respData) {
					    	// 发送失败
					    	if(respData.status != 200){
					    		alert(respData.message);
					    		$("#passwordModal #sendSmsVerify").removeAttr("disabled");
								$("#passwordModal #sendSmsVerify").css("background-color", "#349E18");
								$("#passwordModal #sendSmsVerify").html("发送验证码");
								clearInterval(timer);
					    	}
					    },
					    error:function(){
					    	
					    }
				   });
			}
			if(timeInt == 0){
				$("#passwordModal #sendSmsVerify").removeAttr("disabled");
				$("#passwordModal #sendSmsVerify").css("background-color", "#349E18");
				$("#passwordModal #sendSmsVerify").html("发送验证码");
				clearInterval(timer);
				return false;
			}
			
			$("#passwordModal #sendSmsVerify").html(timeInt + "秒后重发");
			timeInt -= 1;
			},1000);
	});
});

/**
 * 刷新验证码
 */
function refreshLoginVerify(url){
	$("#loginModal #verifyImg").attr("src", url + "?time=" + (Math.round(Math.random()*999)+3000).toString());
};

/**
 * 用户登录
 */
function login(){
	// ===== 数据合法性检查 =========
	// 账户信息(手机号)
	var phone = $("#loginModal #username").val();
	// 手机号的合法性检查
	/* if (!phone.match(/1[3-9]\d{9}$/)){
		alert("请输入正确的手机号！");
		return false;
	} */
	if($.trim(phone) == ""){
		alert("请输入登录帐号！");
		return false;
	}
	
	// 密码
	var pwd = $("#loginModal #password").val();
	// 确认密码
	// 密码的合法性检查
	if (pwd.length == 0){
		alert("密码不能为空！");
		return false;
	}
	if (pwd.length < 6){
		alert("密码必须大于6位！");
		return false;
	}
	
	// 7天自动登录
	var checkIn = $("#loginModal #checkin").val();
	
	// 验证码
	var code = $("#loginModal #verify").val();
	// 验证码检查
	$.ajax({
		url:"__URL__/checkVerify",
		type:"POST",
		async: false,
		   data: "code=" + code,
		   dataType: "text",
		   success:function(respData) {
			   if (respData != null) {
				   if(respData == "true"){
					   $.ajax({
						   url:"__URL__/login",
						   type:"POST",
							async: false,
						    data: "username=" + phone + "&password=" + pwd + "&checkin=" + checkIn,
						    dataType: "json",
						    success:function(respData) {
							   if(respData.code == 200){
								   $('#loginModal').modal('hide');
								   alert(respData.message);
								   $("#loginUser").val(respData.user_id);
								   $("#user_display").text("[" + respData.name + "]");
								   //$("#user_display").attr("action","__URL__/personCenter?id=" + respData.user_id);
								   if($("#sideMenu") != undefined && $("#sideMenu") != null && $("#sideMenu").length > 0){
									   checkHasLogined("__URL__/checkHasLogined");
								   } else {
									   window.location.href="__URL__/showIndex";
								   }
								   
							   } else {
								   alert(respData.message);
								   //$('#loginModal').modal('show');
							   }
						    },
						    error:function(){
						    	
						    }
					   });
					   //$('#loginModal').modal('hide');
						// 检查用户是否登录
						//checkHasLogined("__URL__/checkHasLogined");
				   } else {
					   alert("验证码不正确！");
					   refreshLoginVerify('__URL__/verify');
				   }
			   }
		   },
		   error:function(responseData) {
			   //alert(responseData.responseText);
		   }
	   });
}

// 点击忘记密码
function forgetPassword(){
	$("#loginModal").modal("hide");
	$("#passwordModal").modal("show");
}


/**
 * 刷新验证码
 */
function refreshPwdVerify(url){
	$("#passwordModal #verifyImg_pwd").attr("src", url + "?time=" + (Math.round(Math.random()*999)+3000).toString());
};

//检查手机
function checkPwdPhone(phone){
	// 手机号的合法性检查
	if (!phone.match(/1[3-9]\d{9}$/)){
		$("#passwordModal #msg-phone").text("请输入正确的手机号！");
		return false;
	}
	// 验证手机号是否已经被注册
	$.ajax({
		url:"__URL__/checkHasExistedRtnJson",
		type:"POST",
		async: true,
		   data: "phone=" + phone,
		   dataType: "json",
		   success:function(respData) {
			   if(respData.status == 200){
				   $("#passwordModal #msg-phone").text("");
				   checkPhoneFlag = true;
			   } else {
				   $("#passwordModal #msg-phone").text("该手机号不存在");
			   }
		   },
		   error:function(data){
			   $("#passwordModal #msg-phone").text("手机号验证失败");
		   }
	});
}

// 选择密码找回方式
function gotoSecond(){
	// 手机号
	var phone = $("#passwordModal #username").val();
	// 手机号的合法性检查
	if (!phone.match(/1[3-9]\d{9}$/)){
		$("#passwordModal #msg-phone").text("请输入正确的手机号！");
		return false;
	}
	if(!checkPhoneFlag){
		if($.trim($("#passwordModal #msg-phone").text()) == ""){
			$("#passwordModal #msg-phone").text("请输入正确的手机号！");
		}
		return false;
	}
	
	// 验证码
	var code = $("#passwordModal #verify").val();
	if($.trim(code) == ""){
		alert("请输入验证码");
		return false;
	}
	// 动态密码
	var smsCode = $("#passwordModal #sms_verify_code").val();
	if($.trim(smsCode) == ""){
		alert("请输入获取到的动态密码");
		return false;
	}
	// 验证码检查
	$.ajax({
		url:"__URL__/checkVerify",
		type:"POST",
		async: true,
		   data: "code=" + code,
		   dataType: "text",
		   success:function(respData) {
			   if (respData != null) {
				   if(respData == "true"){
					// 验证动态密码
					   $.ajax({
						   url:"__URL__/checkSmsVerify",
						   type:"POST",
							async: true,
						    data: "phone=" + phone + "&smsVerifyCode=" + smsCode,
						    dataType: "json",
						    success:function(respData) {
						    	if(respData.status == 200){
						    		$("#passwordModal .first_step").hide();
						    		$("#passwordModal .third_step").hide();
						    		$("#passwordModal .second_step").show("slow","linear");
						    	}else{
						    		alert(respData.message);
						    	}
						    },
						    error:function(){
						    	
						    }
					   });
					   
				   } else {
					   alert("验证码不正确！");
					   refreshPwdVerify('__URL__/verify');
				   }
			   }
		   },
		   error:function(responseData) {
			   //alert(responseData.responseText);
		   }
	   });
}

// 执行重置密码操作
function resetPassword(){
	var phone = $("#passwordModal #username").val();
	// 密码
	var pwd = $("#validate_pwd").val();
	// 确认密码
	var pwd_confirm = $("#validate_pwd_confirm").val();
	// 密码的合法性检查
	if (pwd.length == 0){
		alert("密码不能为空！");
		return false;
	}
	if (pwd.length < 6){
		alert("密码必须大于6位！");
		return false;
	}
	if (pwd != pwd_confirm){
		alert("两次输入的密码不一致！");
		return false;
	}
	//保存新密码
	$.ajax({
		   url:"__URL__/resetPwd",
		   type:"POST",
			async: false,
		    data: "phone=" + phone + "&password=" + pwd,
		    dataType: "json",
		    success:function(respData) {
			   if(respData.status == 200){
				   $("#passwordModal .first_step").hide();
				   $("#passwordModal .second_step").hide();
		    	   $("#passwordModal .third_step").show("slow","linear");
			   } else {
				   alert(respData.message);
			   }
		    },
		    error:function(){
		    	
		    }
	   });
}
</script>

<!-- 登录模态框（Modal） -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog"
   aria-hidden="true">
   <div class="modal-dialog" style="width:30%;margin-top:10%;">
      <div class="modal-content">
         <div class="modal-header" style="background-color:#43b413;color:white;height:50px;">
         	<div style="text-align:center;font-size:20px;">登录</div>
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true" style="position:absolute;right:10px;top:10px;font-size:30px;font-weight:bold;opacity:1;color:white;">
                  &times;
            </button>
         </div>
         <div class="modal-body">
            <form class="form-horizontal" role="form" style="margin-left:15%;">
		   <div class="form-group">
		      <div class="col-sm-8">
		         <input type="text" class="form-control" id="username" name="username"
		            placeholder="手机号/会员名/昵称">
		      </div>
		   </div>
		   <div class="form-group">
		      <div class="col-sm-8">
		         <input type="password" class="form-control" id="password" name="password"
		            placeholder="">
		      </div>
		      <div class="">
		         <label class=" control-label" style="text-align:left;"><a href="javascript:forgetPassword();">忘记密码</a></label>
		      </div>
		   </div>
		   <div class="form-group">
		      <div class="col-sm-4">
		         <input type="text" class="form-control" id="verify" 
		            placeholder="">
		      </div>
		      <div class="col-sm-4">
		         <img src="{:U('Index/verify')}" style="width:85px;height:35px;" id="verifyImg">
		      </div>
		      <div class="">
		         <label class=" control-label" style="text-align:left;">看不清
		         <a onclick="refreshLoginVerify('{:U('Index/verify')}')" style="cursor:pointer;margin-left:10px;">换一张</a></label>
		      </div>
		   </div>
		   <div class="form-group">
		      <div class="col-sm-8">
		         <div class="checkbox">
		            <label style="color:black;">
		               <input type="checkbox" name="checkin" id="checkin"> 7天内自动登录
		            </label>
		         </div>
		      </div>
		   </div>
		   <div class="form-group">
		      <div class="col-sm-8">
		         <button type="button" class="btn btn-default" id="loginBtn"
		         style="background-color:#81CB19;color:white;width:100%;height30px">登录</button>
		      </div>
		   </div>
		</form>
         </div>
         <div class="modal-footer">
         </div>
      </div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>


<!-- 忘记密码模态框（Modal） -->
<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog"
   aria-hidden="true">
   <div class="modal-dialog" style="margin-top:8%;">
      <div class="modal-content" style="height:500px;width:700px;">
         <div class="modal-header" style="background-color:#43b413;color:white;height:70px;">
         	<div style="text-align:center;font-size:30px;">密码找回</div>
            <button type="button" class="close"
               data-dismiss="modal" aria-hidden="true" style="position:absolute;right:10px;top:10px;font-size:40px;font-weight:bold;color:white;opacity:1;">
                  &times;
            </button>
         </div>
         <div class="modal-body">
            <form class="form-horizontal" role="form" method="post">
            <!--密码找回第一步开始-->
            <div class="first_step">
               <div class="veri_step_pic veri_step_pic1" style=""></div>
			   <div class="form-group">
			      <label for="username" class="col-sm-4 control-label">账户名:</label>
			      <div class="col-sm-4">
			         <input type="text" class="form-control" id="username" name="username"
			            placeholder="请输入手机号码" oninput="checkPwdPhone(this.value);" onpropertychange="checkPwdPhone(this.value);">
			      </div>
			      <div class="col-sm-4" style="padding:10px;padding-left:0;color:red;" id="msg-phone"></div>
			   </div>
			   <div class="form-group">
			   	  <label for="verify" class="col-sm-4 control-label" >验证码:</label>
	   			  <div class="col-sm-4">
	 			  	  <input type="text" class="form-control" id="verify" 
			            placeholder="不区分大小写" maxlength=4>
			         <img src="{:U('Index/verify')}" style="width:85px;height:35px;position:absolute;right:25px;top:2px;" id="verifyImg_pwd">
			      </div>
			      <div class="">
			         <label class=" control-label" style="text-align:left;">看不清
			         <a onclick="refreshPwdVerify('{:U('Index/verify')}')" style="cursor:pointer;margin-left:20px;">换一张</a></label>
			      </div>
		      </div>
		      <div class="form-group">
			      <label for="sms_verify_code" class="col-sm-4 control-label" >校 验 码:</label>
			      <div class="col-sm-4">
			         <input type="text" class="form-control int" id="sms_verify_code" maxlength=6
			            placeholder="请输入校验码">
			      </div>
			      <div class="col-sm-2">
			         <button type="button" class="btn btn-default" id="sendSmsVerify" style="background-color:#349E18;color:white;">获取动态密码</button>
			      </div>
			   </div>
			   <div class="form-group">
			      <div class="col-sm-offset-4 col-sm-4">
			         <button type="button" class="btn btn-default" id="first_to_second_btn"
			         style="background-color:#FF9219;color:white;height:50px;width:100%;font-size:25px;" onclick="gotoSecond();">下一步</button>
			      </div>
			   </div>
		   </div>
		   <!--密码找回第一步结束-->
		   
		   <!--密码找回第二步开始  -->
		   <div class="second_step" style="display:none;">
		   		<div class="veri_step_pic veri_step_pic2" style="background-position:0 -45px;"></div>
			   	<div class="form-group">
			      <label for="password" class="col-sm-4 control-label" >登录密码:</label>
			      <div class="col-sm-4">
			         <input type="password" class="form-control" id="validate_pwd" name="password"
			            placeholder="">
			      </div>
			   </div>
			   <div class="form-group" style="margin-top:40px;">
			      <label for="password-confirm" class="col-sm-4 control-label" >确认密码:</label>
			      <div class="col-sm-4">
			         <input type="password" class="form-control" id="validate_pwd_confirm" 
			            placeholder="">
			      </div>
			   </div>
			   <div class="form-group" style="margin-top:40px;">
			      <div class="col-sm-offset-4 col-sm-4">
			         <button type="button" class="btn btn-default" id="researchPwdBtn"
			         style="background-color:#FF9219;color:white;height:50px;width:100%;font-size:25px;" onclick="resetPassword();">下一步</button>
			      </div>
			   </div>
		   </div>
		   <!--密码找回第二步结束  -->
		</form>
		<!--密码找回第三步开始  -->
			<form class="form-horizontal" role="form" method="post">
			   <div class="third_step" style="display:none;">
			   		<div class="veri_step_pic veri_step_pic3" style="background-position:0 -95px;"></div>
				   	<div class="form-group" style="margin-left:20%;">
				      <div class="col-sm-9" style="margin-top:10px;">
					      <div class="col-sm-3">
					      <img alt="" src="__PUBLIC__/Image/Index/ok.png">
					      </div>
					      <div class="col-sm-9">
						      <div style="font-size:30px;font-weight:bolder;color:#9C242B;">重置密码成功！</div>
					      	   <div style="margin-top:10px;">
						      	   <a href="javascript:gotoPersonCenter();"  style="">进入会员中心</a>
					      	   		/<a href="{:U('Index/showIndex')}" style="">去预定</a>
					      	   		/<a href="{:U('Index/showIndex')}" style="">返回首页</a> 
					      	   </div>
					      </div>
				      </div>
				   </div>
			   </div>
		   </form>
		   <!--密码找回第三步结束  -->
         </div>
         <div class="modal-footer">
         </div>
      </div><!-- /.modal-content -->
</div>
</div>
   
